import { CheckBox, Radio, Switch } from '@kedacom/react-next'
import { t } from 'i18next'
import { useEffect, useRef } from 'react'
import shallow from 'zustand/shallow'
import LabelWrap from '../../components/LabelWrap'
import { useBasicInfoStore } from '../basicInfo/store'
import { useMeetingParamsStore } from '../meetingParams/store'
import BoxView from './boxView'
import { useMeetingTVWallStore } from './store'
import { changeMode, setCashDataByMeetingType } from './store.combine'
import { IconTips, StyledWrap } from './style'
import View from './ThumbnailView'
import TvwallPlan, { PlanRef } from './TvwallPlan'
import TvwallPoll from './TvwallPoll'

export default function MeetingTVWall() {
	const { enable, update, mode, is_empty, show_mt_name } = useMeetingTVWallStore(
		(state) => ({
			enable: state.enable,
			mode: state.mode,
			update: state.update,
			is_empty: state.is_empty,
			show_mt_name: state.show_mt_name,
		}),
		shallow
	)
	const repeat = useBasicInfoStore((state) => state.repeat)
	const meetingType = useMeetingParamsStore((state) => state.meetingType)
	useEffect(() => {
		/**
		 * 针对于端口会议和传统会议清空缓存当中的四分屏数据
		 * 针对于RTC会议清空画面合成数据
		 */
		setCashDataByMeetingType()
	}, [meetingType])

	/**轮询的ref */
	const planRef = useRef<PlanRef | null>(null)
	return (
		<StyledWrap className="tvwall">
			{!is_empty && (
				<div>
					<LabelWrap className="line" label={t('电视墙')}>
						<Switch
							width={40}
							height={22}
							className="video"
							checked={enable}
							onChange={(e, v) => {
								update({ enable: v })
							}}
						></Switch>
					</LabelWrap>
					{!repeat && enable && (
						<LabelWrap label={t('电视墙预案')} className="line_wrap_vmp">
							<TvwallPlan getVmpParam={() => {}} ref={planRef}></TvwallPlan>
						</LabelWrap>
					)}
					{enable && (
						<div className="line">
							<View></View>
						</div>
					)}
					{enable && (
						<LabelWrap className="line" label={t('电视墙模式')}>
							<Radio
								checked={mode === 1}
								onChange={() => {
									changeMode(1)
								}}
								width={120}
							>
								定制画面
							</Radio>
							<Radio
								checked={mode === 2}
								onChange={() => {
									changeMode(2)
								}}
								width={120}
							>
								批量轮询
							</Radio>
						</LabelWrap>
					)}
					{enable && mode === 1 && (
						<>
							<div className="box-view-content">
								<BoxView></BoxView>
							</div>
							<div className="line_wrap_show_mt_name">
								<LabelWrap>
									<CheckBox
										checked={!!show_mt_name}
										onChange={(e, val) => {
											update({ show_mt_name: val ? 1 : 0 })
										}}
									>
										{t('显示终端名称')}
									</CheckBox>
								</LabelWrap>
								<div className="tip">
									<IconTips></IconTips>
									<span className="msg">请拖拽与会方至指定的画面中</span>
								</div>
							</div>
						</>
					)}
					{enable && mode === 2 && <TvwallPoll></TvwallPoll>}
				</div>
			)}
			{is_empty && <div className="empty_msg">尚未配置任何电视墙，请联系管理员。</div>}
		</StyledWrap>
	)
}
